<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">订单详情</block>
		</cu-custom>
		<block v-if="detail && (detail.shipping_type==1 || detail.shipping_type==4)">
			<addressView ref="addressView" :edit="false"></addressView>
		</block>

		<block v-if="detail">
			<view class="bg-white  padding margin-top padding-lr">
				<view class="solid-bottom space-between padding-bottom-sm">
					<view class=" text-orange">
						<text v-if="detail.is_channel==1">渠道订单</text>
						<text v-if="detail.merchant && detail.merchant.type==1">门店订单</text>
						<text v-else>零售订单</text>
					</view>
					<view class=" text-red">
						<text v-if="detail.order_status == -5" class="text-gray">已删除</text>
						<text v-if="detail.order_status == -4" class="text-gray">已取消</text>
						<text v-if="detail.order_status == -3" class="text-red">已退款</text>
						<text v-if="detail.order_status == -2" class="text-red">拒绝退款</text>
						<text v-if="detail.order_status == -1" class="text-red">申请退款</text>
						<text v-if="detail.order_status == 0" class="text-red">待付款</text>
						<text v-if="detail.order_status == 1" class="text-green">待发货</text>
						<text v-if="detail.order_status == 2" class="text-green">待收货</text>
						<text v-if="detail.order_status == 3" class="text-green">已收货</text>
						<text v-if="detail.order_status == 4" class="text-green">已完成</text>
						<text v-if="detail.order_status == 20" class="text-yellow">待审核</text>
						<text v-if="detail.order_status == 21" class="text-yellow">驳回</text>
					</view>
				</view>
				<view class="" v-for="(item,index) in detail.product" :key="index" @tap="goPage('/pages/shop/goods?id='+item.product_id)">
					<orderGoods :value="item"></orderGoods>
				</view>
				<view class="text-right flex flex-end padding-top" v-if="detail.order_status == 0">
					付款剩余时间：<CountDown ref="CountDown" :value="detail.close_time+''" :skin="'skin32'"></CountDown>
				</view>
			</view>

			<view class="bg-white  padding margin-top padding-lr" v-if="detail.merchant">
				<view class="solid-bottom space-between padding-bottom-sm">
					<view class="">门店地址</view>
				</view>
				<view class="margin-top-sm">
					<view class="text-bold text-lg">{{detail.merchant.title}}</view>
					<view class="margin-top-xs"><text class="cuIcon cuIcon-locationfill"></text>{{detail.merchant.address_name}}
						{{detail.merchant.address_details}}
						<text class="cuIcon cuIcon-shop margin-left text-blue" @tap="showLocation"></text>
					</view>
				</view>
			</view>
			<view class="cu-list menu bg-white margin-top">
				<view class="cu-item">
					<view class="content">订单编号</view>
					<view class="action">
						{{detail.order_sn}}
						<view class="cu-btn sm line-blue round margin-left-xs" @tap="paste(detail.order_sn)">复制</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">下单时间</view>
					<view class="action">{{$common.timeFormat(detail.created_at)}}</view>
				</view>
				<view class="cu-item" v-if="detail.payment_type>0">
					<view class="content">支付方式</view>
					<view class="action">
						<text v-if="detail.payment_type==0">在线支付</text>
						<text v-if="detail.payment_type==1">微信支付</text>
						<text v-if="detail.payment_type==2">支付宝支付</text>
						<text v-if="detail.payment_type==3">银联支付</text>
						<text v-if="detail.payment_type==4">货到付款</text>
						<text v-if="detail.payment_type==5">
							余额支付
							<block v-if="detail.paylog">({{detail.paylog.detail}})</block>
						</text>
						<text v-if="detail.payment_type==6">门店支付</text>
						<text v-if="detail.payment_type==7">积分支付</text>
						<text v-if="detail.payment_type==8">凭证支付</text>
						<text v-if="detail.payment_type==100">线下支付</text>
						<text v-if="detail.payment_type==99">银行卡快付</text>
						<text v-if="detail.payment_type==101">积分兑换</text>
						<text v-if="detail.payment_type==105">组合支付</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">配送方式</view>
					<view class="action">
						<text v-if="detail.shipping_type==1">物流</text>
						<text v-if="detail.shipping_type==2">门店自提</text>
						<text v-if="detail.shipping_type==3">货到付款</text>
						<text v-if="detail.shipping_type==4">本地配送</text>
						<text v-if="detail.shipping_type==5">虚拟</text>
					</view>
				</view>
				<view class="cu-item" v-if="detail.order_status == -1 || detail.order_status == -2 || detail.order_status == -3">
					<view class="content">退款原因</view>
					<view class="action max-width50 text-orange">
						{{detail.return_reason}}
					</view>
				</view>
				<view class="cu-item" v-if="detail.return_memo != ''">
					<view class="content">拒绝退款原因</view>
					<view class="action max-width50 text-orange">
						{{detail.return_memo}}
					</view>
				</view>
				<view class="cu-item">
					<view class="content">商品总额</view>
					<view class="action"><text class="text-price ">{{parseFloat(detail.order_money) - parseFloat(detail.shipping_money)}}</text></view>
				</view>
				<view class="cu-item">
					<view class="content">运费</view>
					<view class="action"><text class="text-price ">{{detail.shipping_money}}</text></view>
				</view>
				<view class="cu-item" v-if="detail.coupon_money>0">
					<view class="content">优惠券</view>
					<view class="action">-<text class="text-price ">{{detail.coupon_money}}</text></view>
				</view>
				<view class="cu-item" v-if="detail.point_money>0">
					<view class="content">积分抵现</view>
					<view class="action">-<text class="text-price ">{{detail.point_money}}</text></view>
				</view>
				<view class="cu-item" v-if="detail.point>0">
					<view class="content">积分</view>
					<view class="action">-<text class="text-price ">{{detail.point}}</text></view>
				</view>
				<block v-if="detail.is_zpay>0">
					<view class="cu-item" v-if="detail.zpay_integral>0">
						<view class="content">组合支付积分</view>
						<view class="action">-<text class="text-price ">{{detail.zpay_integral}}</text></view>
					</view>
					<view class="cu-item" v-if="detail.zpay_money>0">
						<view class="content">组合支付余额</view>
						<view class="action">-<text class="text-price ">{{detail.zpay_money}}</text></view>
					</view>
					<view class="cu-item" v-else>
						<view class="content">组合支付余额</view>
						<view class="action">-<text class="text-price ">{{detail.pay_money-detail.zpay_integral}}</text></view>
					</view>
				</block>
				<view class="cu-item">
					<view class="content"></view>
					<view class="action">总额:<text class="text-price text-red text-bold text-lg margin-left-sm">{{detail.pay_money}}</text></view>
				</view>
			</view>

			<view class="cu-list menu bg-white margin-top" v-if="detail.coupon">
				<view class="cu-item">
					<view class="content">优惠券</view>
					<view class="action">
						<text class="cu-tag bg-red light">{{detail.coupon.title}}</text>
					</view>
				</view>
			</view>

			<view class="cu-list menu bg-white margin-top " v-if="detail.payment_type == 8">
				<view class="cu-bar padding-lr">
					上传凭证
				</view>
				<view class="grid col-4 grid-square flex-sub padding-lr">
					<view class="bg-img" v-for="(item,index) in detail.paylog.voucher.covers" :key="index" @tap="ViewImage" :data-url="detail.paylog.voucher.covers[index]">
						<image :src="detail.paylog.voucher.covers[index]" mode="aspectFill"></image>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">备注</view>
					<view class="action">{{detail.paylog.voucher.content}}</view>
				</view>
				<view class="cu-item" v-if="detail.paylog.examine_status == 2">
					<view class="content">驳回原因</view>
					<view class="action text-red">{{detail.paylog.reject}}</view>
				</view>
			</view>

			<Foot :value="''"></Foot>
			<view class="cu-bar bg-white tabbar  shop foot">
				<button class="action" @tap="goPage('/pages/shop/index')">
					<view class="cuIcon-home">
						<!-- <view class="cu-tag badge"></view> -->
					</view>
					首页
				</button>
				<button class="action" open-type="contact" @tap="showService()">
					<view class="cuIcon-service">
					</view>
					客服
				</button>

				<view class=" w100 flex flex-end padding-lr">
					<view class="cu-btn round margin-right-sm line-brown" @tap="showVerification" v-if="detail && detail.merchant_type == 1">
						<text>核销码</text>
					</view>
					<!-- 关闭状态 -->
					<block v-if="detail.order_status == -4">
						<view class="cu-btn round margin-left-sm line-gray" @tap="deleteOrder">
							<text class="cuIcon-loading2 cuIconfont-spin" v-if="deleteLoading"></text>
							<text>删除订单</text>
						</view>
					</block>
					<!-- 未支付、等待拼团状态 -->
					<block v-if="detail.order_status == 0 || detail.order_status == 20">
						<view class="cu-btn round margin-left-sm line-gray" @tap="closeOrder">
							<text class="cuIcon-loading2 cuIconfont-spin" v-if="closeLoading"></text>
							<text>取消订单</text>
						</view>
					</block>
					<!-- 待支付状态 -->
					<block v-if="detail.order_status == 0">
						<view class="cu-btn round margin-left-sm" :class="'bg-'+theme" @tap="goPage('/pages/member/wallet/pay?id='+detail.id)">立即支付</view>
					</block>
					<!-- 待上传凭证状态 -->
					<block v-if="detail.order_status == 21">
						<view class="cu-btn round margin-left-sm" :class="'bg-'+theme" @tap="goPage('/pages/member/wallet/pay?id='+detail.id)">重新支付</view>
					</block>

					<!-- 已支付状态 -->
					<!-- <block v-if="detail.order_status == 1 && detail.wholesale_id == 0 && detail.is_present == 0 && detail.point<1 && detail.point_money<1">
						<view class="cu-btn round margin-left-sm bg-red" @tap="modalName='ReturnModal'">申请退款</view>
						<block v-if="detail.merchant && detail.merchant.type == 1">
						</block>
					</block> -->
					<block v-if="detail.order_status == -2">
						<!-- <view class="cu-btn round margin-left-sm bg-red" @tap="modalName='ReturnModal'">再次申请退款</view> -->
					</block>
					<!-- 已发货状态 -->
					<block v-if="detail.order_status >= 2">
						<block v-if="detail.shipping_type==1">
							<view class="cu-btn round margin-left-xs " :class="'line-'+theme" @tap="goPage('/pages/shop/order/express?id='+detail.id)">查看物流</view>
						</block>
					</block>
					<!-- 已发货状态 -->
					<view class="cu-btn round margin-left-xs bg-red" @tap="takeOrder" v-if="detail.order_status == 2">确定收货</view>
					
					<!-- <view class="cu-btn round margin-left-xs bg-red" @tap="goPage('/pages/shop/order/refund_goods?orderid='+detail.id)"  v-if="( detail.order_status == 3 || detail.order_status == 4) && detail.product[0].is_customer == 0 && detail.wholesale_id == 0 && detail.is_present == 0 && detail.point<1 && detail.point_money<1">退货申请</view> -->
					<view class="cu-btn round margin-left-xs bg-red" @tap="goPage('/pages/shop/order/refund_goods?orderid='+detail.id)"  v-if="( detail.order_status == 3 || detail.order_status == 4) && detail.product[0].is_customer == 1 && detail.wholesale_id == 0 ">查看售后</view>
					
					<view class="cu-btn round margin-left-xs" :class="'bg'+theme"
					 v-if="detail.order_status == 4 && detail.product_count == 1 && detail.product[0].is_evaluate == 0" 
					 @tap="goPage('/pages/shop/evaluate/create?orderid='+detail.id + '&orderproid='+detail.product[0].id )">
					我要评价</view>
					
					<view class="cu-btn round margin-left-xs" :class="'bg'+theme"
					 v-if="detail.order_status == 4 && detail.product_count == 1 && detail.product[0].is_evaluate == 1" 
					@tap="goPage('/pages/shop/evaluate/re_create?type=review&orderid='+detail.id )">
					我要追评</view>
					
					<view class="cu-btn round margin-left-xs" :class="'bg'+theme"
					 v-if="detail.order_status == 4 && detail.product_count > 1 "
					@tap="goPage('/pages/shop/evaluate/re_create?type=review&orderid='+detail.id )">
					我要评价</view>
				</view>
			</view>
		</block>
		<serviceView ref="serviceView"></serviceView>

		<view class="cu-modal" :class="modalName=='ReturnModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">退款申请</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close "></text>
					</view>
				</view>
				<view class="bg-white padding">
					<view class="cu-bar">
						<view class="action">退款原因</view>
					</view>
					<view class="cu-form-group bg-gray radius padding-xs">
						<textarea maxlength="-1" placeholder="请输入原因" v-model="reason" class="text-left   "></textarea>
					</view>
					<view class="cu-btn bg-blue margin-top" @tap="returnApply">确定</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='qrCodeModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">核销码</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close "></text>
					</view>
				</view>
				<view class="bg-white text-center justify-center flex">
					<canvas canvas-id="qrcode" style="width: 300px;height: 300px;" />
				</view>
				<view class="text-center">核销码：{{detail?detail.verification_code:''}}</view>
				<view class="margin text-center text-gray">出示此二维码进行核销</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/Sansnn-uQRCode/uqrcode.js'
	import CountDown from '@/components/default/CountDown.vue'
	import serviceView from '@/components/default/serviceView.vue'
	import addressView from '@/components/shop/addressView.vue'
	import orderGoods from '@/components/shop/orderGoods.vue'
	import Foot from '@/components/default/foot.vue'
	export default {
		components: {
			CountDown,
			serviceView,
			addressView,
			orderGoods,
			Foot
		},
		filters: {},
		data() {
			return {
				detail: null,
				id: 0,
				loading: false,
				closeLoading: false,
				deleteLoading: false,
				takeLoading: false,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				modalName: '',
				
				reason: '',
				returnLoading: false,
			}
		},
		onLoad(options) {
			this.id = options.id
			if (!this.id) {
				this.$common.showErrorModal('参数有误')
			}
			// this.$nextTick((r) => {
			// 	uni.startPullDownRefresh({})
			// })
			this.getInfo()
		},
		methods: {
			getInfo(id) {
				this.$http
					.get('order_view', {
						id: this.id,
					})
					.then((response) => {
						this.detail = response.data.data
						console.log(this.detail);
						this.$nextTick((r) => {
							if (this.$refs.addressView) {
								this.$refs.addressView.setAddress({
									realname: this.detail.receiver_name,
									mobile: this.detail.receiver_mobile,
									address_name: this.detail.receiver_region_name,
									address_details: this.detail.receiver_address,
								})
							}
						})
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
			deleteOrder() {
				if (this.deleteLoading) return
				this.deleteLoading = true
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.delete('order_delete', {
						id: this.detail.id
					})
					.then((response) => {
						this.detail.order_status = -5
						this.deleteLoading = false
						uni.hideLoading()
						this.$common.showSuccess('处理成功', (r) => {
							uni.redirectTo({
								url: '/pages/shop/order/index'
							})
						})
					})
					.catch((response) => {
						this.deleteLoading = false
						uni.hideLoading()
					})
			},
			returnApply() {
				if (this.returnLoading) return
				this.returnLoading = true
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.post('order_return_apply', {
						id: this.detail.id,
						reason: this.reason,
					})
					.then((response) => {
						this.detail.order_status = -1
						this.returnLoading = false
						uni.hideLoading()
						this.getInfo()
						this.$common.showSuccess('处理成功')
						this.modalName = ''
					})
					.catch((response) => {
						this.returnLoading = false
						uni.hideLoading()
					})
			},
			takeOrder() {
				if (this.takeLoading) return
				this.takeLoading = true
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.delete('order_take_delivery', {
						id: this.detail.id
					})
					.then((response) => {
						this.detail.order_status = 4
						this.takeLoading = false
						uni.hideLoading()
						this.$common.showSuccess('处理成功')
					})
					.catch((response) => {
						this.takeLoading = false
						uni.hideLoading()
					})
			},
			closeOrder() {
				if (this.closeLoading) return
				this.closeLoading = true
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.get('order_close', {
						id: this.detail.id
					})
					.then((response) => {
						this.detail.order_status = -4
						console.log(response)
						this.closeLoading = false
						uni.hideLoading()
						this.$common.showSuccess('处理成功')
					})
					.catch((response) => {
						this.closeLoading = false
						uni.hideLoading()
					})
			},
			paste(value) {
				let _this = this
				uni.setClipboardData({
					data: value,
					success() {
						_this.$common.showSuccess('复制成功')
					}
				})
			},
			showService() {
				this.$refs.serviceView.show()
			},
			// showService() {
			// 	// this.$refs.serviceView.show()
			// 	// window.open('https://uclient.yunque360.com/frame.html?company_id=cjch051hm27mtl')
			// 	(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/647cfb665881c5ee62274c0e78aaad3b0/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();
				
				
			// },
			ViewImage(e) {
				uni.previewImage({
					urls: this.detail.paylog.voucher.covers,
					current: e.currentTarget.dataset.url
				});
			},
			showReturn() {

			},
			showVerification() {
				uni.showLoading({
					title: '加载中...'
				})
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.detail.verification_code,
					size: 300,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						this.modalName = 'qrCodeModal'
						uni.hideLoading()
					}
				})
			},
			showLocation() {
				// console.log(this.detail.merchant.longitude+'-'+this.detail.merchant.latitude)
				uni.openLocation({
					longitude: parseFloat(this.detail.merchant.longitude),
					latitude: parseFloat(this.detail.merchant.latitude),
					success: (res) => {},
					fail: (error) => {
						this.$common.showError(error)
					}
				})
			}
		},
		onPullDownRefresh() {
			this.getInfo()
		},
	}
</script>

<style>
	
	.space-between {
		display: flex;
		justify-content: space-between;
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
	}

	.address {}

	.address .bottom {
		width: 100%;
		height: 15rpx;
		overflow: hidden;
	}

	.address .bottom image {
		width: 100%;
		height: 100%;
	}

	.goods-content {
		display: block;
		overflow: hidden;
		margin: 0 15rpx;
	}

	.goods-content .goods-item:last-child {
		margin-bottom: 0;
	}

	.goods-item {
		margin-bottom: 15rpx;
		width: 100%;
		height: 190rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
	}

	.goods-item .thumb {
		width: 190rpx;
		height: 190rpx;
		min-width: 190rpx;
	}

	.goods-item .desc {
		width: 100%;
		margin-left: 15rpx;
	}

	.goods-title {
		height: 84rpx;
		line-height: 42rpx;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.goods-attr {}

	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 0rpx 36rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}

	.white-box .cu-form-group {
		padding: 0;
	}

	.cu-form-group .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 55rpx;
	}

	.cu-form-group .picker {
		color: #D1D1D1;
		font-size: 26rpx;
	}

	.cu-form-group picker {
		margin-right: 0;
		/* padding-right: 20rpx; */
		text-align: right;
	}

	.cu-form-group .area-picker {
		padding-right: 0;
		font-size: 26rpx;
	}

	.cu-form-group .input-holder {
		text-align: right;
		color: #D1D1D1;
		font-size: 26rpx;
	}

	.cu-form-group input {
		text-align: right;
	}

	.tips {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		font-size: 24rpx;
		font-weight: bold;
		color: #BEBEBE;
		line-height: 45rpx;
	}

	.tips text {
		color: #FF0000;
		margin-right: 10rpx;
	}

	button {
		width: 576rpx;
		margin: 88rpx 92rpx -10rpx;
	}

	.cu-card>.cu-item {
		margin: 10px 15px 5px 15px;
	}

	.white-box {
		margin: 5px 18px 0;
	}

	.botton-view {
		margin-top: 30px;
		text-align: center;
	}

	.botton-view .cu-btn {
		margin: 10rpx auto;
	}

	.space-between {
		display: flex;
		justify-content: space-between;
	}

	.radio5 {
		border-radius: 10rpx;
		overflow: hidden;
		background: #FFF;
		margin: 20rpx 20rpx 0;
		width: auto;
	}

	.max-width50 {
		max-width: 50%;
	}
</style>
</style>
